<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/glp1.css">
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/glp1.js"></script>
    <script src="js/Questions.js"></script>
    <title>盖洛普测试题</title>
</head>
<body>  
    <div class="body_bg">
        <!-- 职业优势测评 -->
        <div class="glp_head">
            <div class="glp_head_title">职业优势测评</div>
        </div>
        <!-- 答题卡 -->
        <div class="blp_answer_body" >
            <div class="blp_answer_title">第<span id="answNum">1</span>题 <span class="dx">(单选题)</span></div>
            <div class="qbq_ques">
                <!--试题区域-->
                <ul class="list-unstyled question" id="" name="">
                    <li class="question_title"></li>
                </ul>
                <!--考题的操作区域-->
            </div>
            <!-- 下一题 -->
            <div class="next_box">
                <div class="next_answer" id="nextQuestion">下一题</div>
                <div class="next_answer" id="sendQuestion" style="display:none">交卷</div>
            </div>
            <!-- 倒计时 -->
            <div class="answer_time">
                <!-- 倒计时 -->
                <div class="timeout">剩余时间:<span id="remainTime">30分</span></div>
                <!-- 当前进度 -->
                <div class="pro">当前进度:<span class="myprogress" id="mypro-num">1</span>/186</div>
                <!-- 进度条 -->
                <div class="por_box">
                    <div class="pro_crcle"></div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <!-- 答题完毕后页面 -->
        <div class="over" style="display:none">
            <div class="over_body">
                <div class="over_title">恭喜！</div>
                <div class="over_con">您的评测数据已上传，请稍等30秒以内，即可下载报告，如您不想等待，可在线查看报告</div>
                <!-- 按钮 -->
                <div class="over_btnbox">
                    <!-- 下载评测报告 -->
                    <button type="button" class="over_btn over_btn_left btn">下载评测报告<span class="time_60">(<span id="time_60">60S</span>)</span></button>
                    <button type="button" class="over_btn over_btn_right btn" >在线查看报告</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>

var questions= QuestionJosn;
var itemList=["A","B","C","D","E","F"]
var activeQuestion=0; //当前操作的考题编号
var questioned = 0; //
var checkQues = []; //已做答的题的集合
//展示考卷信息
function showQuestion(id){
    $(".questioned").text(id+1);
    questioned = (id+1)/questions.length
    if(activeQuestion!=undefined){
        $("#ques"+activeQuestion).removeClass("question_id").addClass("active_question_id");
    }
    activeQuestion = id;
    $(".question").find(".question_info").remove();
    var question = questions[id];
    $("#answNum").text(id+1)
    $(".question_title").html("<strong>"+(id+1)+"、</strong>"+question.questionTitle);
    var items = question.questionItems.split(";");
    var item="";
    for(var i=0;i<items.length;i++){
        item ="<li class='question_info' onclick='clickTrim(this)' id='item"
                +i+"'><input type='radio' name='item' value='"+itemList[i]+"'>&nbsp;"+itemList[i]+"."+items[i]+"</li>";
        $(".question").append(item);
    }
    $(".question").attr("id","question"+id);
    $("#ques"+id).removeClass("active_question_id").addClass("question_id");
    for(var i=0;i<checkQues.length;i++){
        if(checkQues[i].id==id){
            $("#"+checkQues[i].item).find("input").prop("checked","checked");
            $("#"+checkQues[i].item).addClass("clickTrim");
            $("#ques"+activeQuestion).removeClass("question_id").addClass("clickQue");
        }
    }
    progress();
}

/*答题卡*/
function answerCard(){
    $(".question_sum").text(questions.length);
    for(var i=0;i<questions.length;i++){
        var questionId ="<li id='ques"+i+"'onclick='saveQuestionState("+i+")' class='questionId'>"+(i+1)+"</li>";
        $("#answerCard ul").append(questionId);
    }
}

/*选中考题*/
var Question;
function clickTrim(source){
    var id = source.id;
    $("#"+id).find("input").prop("checked","checked");
    $("#"+id).addClass("clickTrim");
    $("#ques"+activeQuestion).removeClass("question_id").addClass("clickQue");
    var ques =0;
    for(var i=0;i<checkQues.length;i++){
       if( checkQues[i].id==activeQuestion&&checkQues[i].item!=id){
           ques = checkQues[i].id;
           checkQues[i].item = id;//获取当前考题的选项ID
           checkQues[i].answer =$("#"+id).find("input[name=item]:checked").val();//获取当前考题的选项值
       }
    }
    if(checkQues.length==0||Question!=activeQuestion&&activeQuestion!=ques){
        var check ={};
        check.id=activeQuestion;//获取当前考题的编号
        check.item = id;//获取当前考题的选项ID
        check.answer =$("#"+id).find("input[name=item]:checked").val();//获取当前考题的选项值
        checkQues.push(check);
    }
    $(".question_info").each(function(){
        var otherId =$(this).attr("id");
        if(otherId!=id){
            $("#"+otherId).find("input").prop("checked",false);
            $("#"+otherId).removeClass("clickTrim");
        }
    })
    Question = activeQuestion;
}

/*设置进度条*/
function progress(){
    var prog = ($(".active_question_id").length+1)/questions.length;
    var pro = $(".progress").parent().width() * prog;
    $(".progres").text((prog*100).toString().substr(0,5)+"%")
    $(".progress").animate({
        width: pro,
        opacity: 0.5
    }, 1000);
}

/*保存考题状态 已做答的状态*/
function saveQuestionState(clickId){
    showQuestion(clickId)
}

$(function(){
    $(".middle-top-left").width($(".middle-top").width()-$(".middle-top-right").width())
    $(".progress-left").width($(".middle-top-left").width()-200);
    progress();
    answerCard();
    showQuestion(0);
    /*收藏按钮的切换*/
    /*答题卡的切换*/
    $("#openCard").click(function(){
        $("#closeCard").show();
        $("#answerCard").slideDown();
        $(this).hide();
    })
    $("#closeCard").click(function(){
        $("#openCard").show();
        $("#answerCard").slideUp();
        $(this).hide();
    })
    //进入下一题
    var testNum = 1;
    $("#nextQuestion").click(function(){
        if((activeQuestion+1)!=questions.length) showQuestion(activeQuestion+1);
        showQuestion(activeQuestion)
        testNum = testNum+1
        if(testNum<=20){
            $(".pro_crcle").css("left",testNum)
            $("#mypro-num").text(testNum)
            $("#answNum").text(testNum)
        }else{
            // alert("已经没有题目了哦")
            $("#sendQuestion").show()

        }
    })
    $("#sendQuestion").click(function(){
        $(".blp_answer_body").hide()
        $(".over").show()
    })

})
</script>
</html>